<template>
  <div>
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="自习室编号">
        <el-input v-model="queryInfo.roomNo" placeholder="自习室编号"></el-input>
      </el-form-item>
      <el-form-item label="自习室类型">
        <el-select v-model="queryInfo.roomType" placeholder="自习室类型">
          <el-option v-for="item in allType" :label="item.typeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自习室状态">
        <el-select v-model="queryInfo.dataStatus" placeholder="自习室状态">
          <el-option label="正常" value="true"></el-option>
          <el-option label="锁定" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="12">
      <el-col>
        <span>预约时间：</span>
        <el-date-picker
            v-model="nowDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6" v-for="item in tableData">
        <el-card shadow="always" >
          <el-descriptions title="自习室信息" column="2">
            <el-descriptions-item label="自习室ID">{{item.id}}</el-descriptions-item>
            <el-descriptions-item label="自习室编号">{{item.roomNo}}</el-descriptions-item>
            <el-descriptions-item label="自习室地址">{{item.roomUrl}}</el-descriptions-item>
            <el-descriptions-item label="自习室初始价格">{{item.startPrice}}</el-descriptions-item>
            <el-descriptions-item label="自习室单位时间">{{item.unitType}}</el-descriptions-item>
            <el-descriptions-item label="自习室单位价格">{{item.unitPrice}}</el-descriptions-item>
            <el-descriptions-item label="自习室封顶价格">{{item.maxPrice}}</el-descriptions-item>
            <el-descriptions-item label="自习室描述">{{item.roomDesc}}</el-descriptions-item>
          </el-descriptions>
          <el-form>
            <el-button style="float:right;margin-right: 10px;margin-bottom: 10px" @click="selectRoom(item,nowDate)" type="primary">选择</el-button>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <div class="block" style="float: right;margin: 10px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          layout="sizes, prev, pager, next"
          :total="dataCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {doGetRoom} from "@/api/room";
import {doGetAllRoomType} from "@/api/roomType";
import {doCreateOrder} from "@/api/order";
import {dateFormat} from "@/utils/TimeUtil";

export default {
  name: "index",
  data(){
    return{
      page:{pageIndex:1,pageSize:10},
      dataCount:10,
      queryInfo: {
        roomNo: '',
        roomType: '',
        dataStatus: ''
      },
      tableData: [],
      allType:[],
      nowDate:[]
    }
  },
  methods:{
    getTableData(){
      this.addDialog=false;
      this.updateDialog=false;
      const obj = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
        queryInfo: this.queryInfo
      }
      doGetRoom(obj).then(res=>{
        if (res.code===200){
          this.dataCount=res.data.total;
          this.tableData = res.data.records;
        }
      })
    },
    onSubmit() {
      this.getTableData();
    },
    handleSizeChange(val) {
      this.page.pageSize=val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageIndex=val;
      this.getTableData();
    },
    selectRoom(room,date){
      if (date==null||date.length<2){
        this.$message.error('请选择时间');
      }else{
        const obj={
          startTime: dateFormat(date[0]),
          endTime: dateFormat(date[1]),
          roomId: room.id,
          token: window.localStorage.getItem("token")
        }
        doCreateOrder(obj).then(res=>{
          if (res.code===200){
            this.$message.success('预约成功');
          }
        })
      }
    }
  },
  mounted() {
    this.getTableData();
    doGetAllRoomType().then(res=>{
      if (res.code===200){
        this.allType=res.data;
      }
    })
  }
}
</script>

<style lang="less" scoped>
  .el-card{
    margin-top: 10px;
  }
</style>